<template>
  <NavBar></NavBar>
  <div style="padding: 0 40rpx 0;">
    <div class="title">
      <div>注册账号</div>
    </div>
    <!-- 账户 -->
    <van-field v-model="form.username" label="用户名" placeholder="请填写用户名" @input="phoneInput" />
    <!-- 密码 -->
    <van-field v-model="form.password" :password="isEyes" label="密码" placeholder="请填写密码"
      :right-icon="[isEyes ? 'closed-eye' : 'eye-o']" @click-icon="isEyes = !isEyes;" @input="userPasswordInput" />
    <!-- 验证码 -->
    <van-field v-model="form.smsCode" label="验证码" right-text="1" placeholder="请输入短信验证码" @input="smsCodeInput">
      <template #button>
        <button class="smsCodeClass" @click="sendCode" :disabled="timeNumber !== 60">{{ timeNumber !== 60 ?
          timeNumber + '秒后可重发' : '发送验证码' }}</button>
      </template>
    </van-field>

    <div class="loginStyle">
      <van-button round block type="primary" @click="submitRegisterForm">
        提交
      </van-button>
    </div>
    <div>
    </div>
  </div>

  <van-toast id="van-toast" />
  <van-dialog z-index="10" use-slot title="输入图形验证码" v-model:show="codeDialog" v-if="codeDialog" show-cancel-button
    @cancel="onCancel" @confirm="codeConfirm" :before-close="onBeforeClose">
    <div class="codeDialogSty">
      <input class="codeInput" type="text" placeholder="输入图片中的字符" v-model="codeData.picVerificationCode">
      <div @click="useGetPicCode()">
        <img class="codePng" :src="codeUrl" alt="">
        <div class="codeBtmTxt">看不清楚？换一张</div>
      </div>
    </div>
  </van-dialog>
</template>
<script setup>
import Toast from '../../../node_modules/@vant/weapp/dist/toast/toast';
import { setToken } from '@/utils/auth';
import { getPicCode, getSmsCode, registerPhone } from '@/api/register';
import { computed, ref } from 'vue';
import NavBar from '@/components/NavBar'

console.log(getCurrentPages());
const codeDialog = ref(false);
const isEyes = ref(true);
const form = ref({
  // 手机号
  phone: '',
  // 密码
  password: '',
  // 短信验证码
  smsCode: '',
  // 注册类型 [ email, phone, weixin ]
  registerType: 'phone'
})
const timeNumber = ref(60)


const formRules = () => {
  if (form.value.phone === '' || form.value.password === '') {
    Toast.fail('请填写用户名和密码')
    return Promise.reject(() => { })
  }
  if (form.value.password.length < 6 || form.value.password.length > 20) {
    Toast.fail('密码长度应为6至20个字符')
    return Promise.reject(() => { })
  }
  if (form.value.smsCode === '') {
    Toast.fail('验证码不能为空')
    return Promise.reject(() => { })
  }
}
// 图形验证码Base64
const picCodeBase64 = ref('')

const codeData = ref({
  phone: '',
  // 图形验证码会话 ID
  picCodeSessionId: '',
  // 图片验证码
  picVerificationCode: '',
  // 注册类型 [ email, phone, weixin ]
  registerType: 'phone'
})
const codeUrl = computed(() => {
  return 'data:image/png;base64,' + picCodeBase64.value
})
// 登陆按钮
const submitRegisterForm = async () => {
  // 表单验证
  await formRules()
  const res = await registerPhone(form.value)
  Toast.success('注册成功')
  uni.navigateTo({ url: '/pages/login/index' })
}

const phoneInput = (e) => {
  form.value.phone = e.detail
  codeData.value.phone = e.detail

}

const userPasswordInput = (e) => {
  form.value.password = e.detail
}

const smsCodeInput = (e) => {
  form.value.smsCode = e.detail
}

// 获取图形验证码
const useGetPicCode = async () => {
  const res = await getPicCode()
  codeData.value.picCodeSessionId = res.data.picCodeSessionId
  picCodeBase64.value = res.data.picCodeBase64
}
// 发送图形验证码
const sendCode = async () => {
  if (form.value.phone === '' || form.value.password === '') {
    return Toast.fail('请填写用户名和密码')
  }
  codeData.value.picVerificationCode = ''
  useGetPicCode()
  codeDialog.value = true
}

const onCancel = () => {
  codeDialog.value = false
  form.value.smsCode = ''
}

const onBeforeClose = (action) => {
  new Promise(() => {

  })
}

const time = () => {

  const id = setInterval(() => {
    if (timeNumber.value === 0) {
      timeNumber.value = 60
      clearInterval(id)
      return
    }
    timeNumber.value--
  }, 1000);
}

const codeConfirm = async () => {
  if (!codeData.value.picVerificationCode) {
    Toast.fail('请输入图形验证码')
    return false
  }
  await getSmsCode(codeData.value)
  Toast.success('验证码已发送')
  codeDialog.value = false
  time()
}
</script>
<style lang="less" scoped>
::v-deep {

  .van-cell {
    width: 672rpx;
    height: 115rpx;
    background: #FFF;
    border-radius: 50rpx;
    margin: 40rpx 0;
  }

  .van-cell:after {
    border-bottom: none !important;
  }

  .van-cell__title {
    margin: auto 0;
  }

  .van-cell__value {
    margin: auto 0;
  }

  .van-button {
    height: 100rpx;
    font-size: 32rpx;
  }

  .van-nav-bar {
    background-color: rgba(0, 0, 0, 0);
  }

  .van-icon-arrow-left {
    color: black !important
  }
}

.smsCodeClass {
  font-size: 24rpx;
  width: 100%;
  padding: 0;
}

.smsCodeClass::after {
  border: none !important;
  background-color: transparent;
}



.title {
  font-size: 58rpx;
  font-weight: bold;
  letter-spacing: 5px;
  margin-top: 207rpx;
}

.loginStyle {
  margin: 100rpx 5rpx 0;
}



.codeInput {
  box-sizing: border-box;
  width: 310rpx;
  height: 72rpx;
  border-radius: 8rpx;
  border: 1rpx solid #BABFBA;
  color: #B3B7BC;
  font-size: 24rpx;
  padding-left: 30rpx;
  line-height: 72rpx;
}

.codeDialogSty {
  position: relative;
  padding: 62rpx 42rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.codePng {
  display: block;
  width: 206rpx;
  height: 78rpx;
}

.codeBtmTxt {
  position: absolute;
  bottom: 30rpx;
  right: 70rpx;
  font-size: 23.08rpx;
  color: #939393
}
</style>